<template>
  <div class="shopcart">
	  <ul>
	  	<li v-for="item in shopcart" :key="item.id">
	  		<img :src="item.src" alt="">
			<div>
				<p>{{item.title}}x{{item.num}}</p>
				<p class="price">¥ {{item.price}}</p>
				<button @click="del(item)">删除</button>
			</div>
	  	</li>
	  </ul>
	  <!-- 判断如果购物车有商品再显示总价 -->
	  <p v-if="shopcart.length" class="total-price">商品总价：¥ {{totalPrice}}</p>
	  <p v-else class="no-price">购物车暂无商品</p>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'ShopCart',
  computed: mapState({
		shopcart: 'shopcart',
		totalPrice(){
			return this.$store.getters.totalPrice;
		}
	}
  ),
  methods: {
	  del(item){
		  this.$store.commit('del',item);
	  }
  }
}
</script>
<style scoped>
	li{
		list-style: none;
		border-bottom: 1px dashed #ccc;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
		font-size: 14px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 20px 5px 10px;
	}
	.shopcart{
		padding-bottom: 50px;
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		color: white;
		border: none;
		padding: 5px;
	}
	.total-price{
		margin: 10px;
	}
	.no-price{
		text-align: center;
		margin: 10px;
	}
</style>